<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="工作计划" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>
        <FlowInfoCard  :id="form.id+''" :billType="form.billType" :flowInsId="form.flowInsId">
            <!-- 添加或修改员工入职对话框 -->
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                    </div>
                    <el-form-item label="计划标题" prop="title">
                        <el-input v-model="form.title" placeholder="请输入计划标题"/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-divider content-position="center">工作计划安排信息</el-divider>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddOaWorkPlanItem">
                                添加
                            </el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteOaWorkPlanItem">
                                删除
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-table :border="Global.tableShowBorder" :data="oaWorkPlanItemList" :row-class-name="rowOaWorkPlanItemIndex" @selection-change="handleOaWorkPlanItemSelectionChange" ref="oaWorkPlanItem">
                        <el-table-column type="selection" width="50" align="center"/>
                        <el-table-column label="序号" align="center" prop="index" width="50"/>
                        <el-table-column label="任务描述" prop="detail">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.detail" type="textarea" :rows="3" placeholder="请输入详细信息"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="负责人" prop="dutyNickName" width="150">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.dutyNickName" placeholder="请输入负责人名称" @focus="openSelectOneUser(scope.row.index)"/>
                            </template>
                        </el-table-column>
    <!--                    <el-table-column label="协助人名称" prop="helpNickName" width="150">-->
    <!--                        <template slot-scope="scope">-->
    <!--                            <el-input v-model="scope.row.helpNickName" placeholder="请输入协助人名称"/>-->
    <!--                        </template>-->
    <!--                    </el-table-column>-->
                        <el-table-column label="计划开始时间" prop="startTime" width="150">
                            <template slot-scope="scope">
                                <el-date-picker clearable v-model="scope.row.startTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划开始时间"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="计划结束时间" prop="endTime" width="150">
                            <template slot-scope="scope">
                                <el-date-picker clearable v-model="scope.row.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择计划结束时间"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="产出物" prop="makeObject" width="150">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.makeObject" placeholder="请输入产出物"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="进度" prop="schedule" width="150">
                            <template slot-scope="scope">
    <!--                            <el-input v-model="scope.row.schedule" placeholder="请输入进度"/>-->
                                <el-slider v-model="scope.row.schedule" :disabled="true"></el-slider>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="status" width="150">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.status" placeholder="请选择状态">
                                    <el-option v-for="dict in dict.type.progress_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-card>
            </el-form>
        </FlowInfoCard>
        <el-dialog :visible.sync="showSelectOneUser" title="选择负责人" width="1200px" append-to-body>
            <SelectOneUser @selectedOneUser="selectedOneUser" @closeSelectOneUser="closeSelectOneUser"></SelectOneUser>
        </el-dialog>


    </div>
</template>

<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import FormTopBar from "@/views/workflow/common/formTopBar"
import {addWorkPlan, getWorkPlan, updateWorkPlan} from "@/api/oa/workPlan";
import SelectOneUser from "@/views/common/selectUser/selectOneUser"
import FlowInfoCard from "@/views/workflow/common/flowinfoCard";

export default {
    name: "WorkPlanForm",
    components:{FlowInfo,FormTopBar,SelectOneUser,FlowInfoCard},
    dicts:['progress_status'],
    data() {
        return {
            showSelectOneUser:false,
            selectIndex:0,
            // 子表选中数据
            checkedOaWorkPlanItem: [],
            // 工作计划安排表格数据
            oaWorkPlanItemList: [],
            // 表单参数
            form: {

            },
            showFlowInfo:false,
            taskId:'',
            // billType:'',
            readonly:false,
            // 表单校验
            rules: {
                title: [
                    {required: true, message: "计划标题不能为空", trigger: "change"}
                ]
            },
            showCommitDialog:false,
            commitType:"",
            sealList:[]
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
    },
    mounted() {
    },
    methods: {
        //  获取单据信息
        getDetailData(id) {
            getWorkPlan(id).then(response => {
                this.form = response.data;
                this.oaWorkPlanItemList = response.data.oaWorkPlanItemList;
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.oaWorkPlanItemList = this.oaWorkPlanItemList;
                    if (this.form.id != null) {
                        updateWorkPlan(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addWorkPlan(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: '/work/workPlan',query: {billType:this.form.billType}});
        },
        /** 工作计划安排序号 */
        rowOaWorkPlanItemIndex({row, rowIndex}) {
            row.index = rowIndex + 1;
        },
        /** 工作计划安排添加按钮操作 */
        handleAddOaWorkPlanItem() {
            let obj = {};
            obj.groupName = "";
            obj.detail = "";
            obj.remark = "";
            obj.dutyUserId = "";
            obj.dutyNickName = "";
            obj.helpUserId = "";
            obj.helpNickName = "";
            obj.startTime = "";
            obj.endTime = "";
            obj.schedule = 0;
            obj.makeObject = "";
            obj.status = "0";
            this.oaWorkPlanItemList.push(obj);
        },
        /** 工作计划安排删除按钮操作 */
        handleDeleteOaWorkPlanItem() {
            if (this.checkedOaWorkPlanItem.length == 0) {
                this.$modal.msgError("请先选择要删除的工作计划安排数据");
            } else {
                const oaWorkPlanItemList = this.oaWorkPlanItemList;
                const checkedOaWorkPlanItem = this.checkedOaWorkPlanItem;
                this.oaWorkPlanItemList = oaWorkPlanItemList.filter(function (item) {
                    return checkedOaWorkPlanItem.indexOf(item.index) == -1
                });
            }
        },
        /** 复选框选中数据 */
        handleOaWorkPlanItemSelectionChange(selection) {
            this.checkedOaWorkPlanItem = selection.map(item => item.index)
        },



        openSelectOneUser(index){
            console.log("选择的第几行:"+index);
            this.selectIndex = index;
            this.showSelectOneUser = true;
        },
        //选择完一条用户
        selectedOneUser(user){
            console.log("选择一条用户："+JSON.stringify(user))
                this.oaWorkPlanItemList.forEach((item,index)=>{
                    if(index==(this.selectIndex-1)){
                        item.dutyUserId = user.userId;
                        item.dutyNickName = user.nickName;
                    }
                })


            this.showSelectOneUser = false;
        },
        // 关闭选择一个用户弹窗
        closeSelectOneUser(){
            this.showSelectOneUser = false;
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
};
</script>
